<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
     <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
     <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
     <link rel="stylesheet" href="../css/style.css">
 	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
     <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<body class="hold-transition skin-red sidebar-mini">
  <!-- .box-body -->
  <div class="box-header with-border">
      <h3 class="box-title">品牌管理</h3>
  </div>
  <div class="box-body">
      <!-- 数据表格 -->
      <div class="table-box">
          <!--工具栏-->
          <div class="pull-left">
              <div class="form-group form-inline">
                  <div class="btn-group">
                      <button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ><i class="fa fa-file-o"></i> 新建</button>
                      <button type="button" class="btn btn-default" title="删除" onclick="delAll()"><i class="fa fa-trash-o"></i> 删除</button>
                      <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
                  </div>
              </div>
          </div>
          <div class="box-tools pull-right">
              <div class="has-feedback">
              </div>
          </div>
          <!--工具栏/-->
          <!--数据列表-->
          <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
              <thead>
              <tr>
                  <th class="" style="padding-right:0px">
                      <input id="selall" type="checkbox" class="icheckbox_square-blue">
                  </th>
                  <th class="sorting_asc">品牌ID</th>
                  <th class="sorting">品牌名称</th>
                  <th class="sorting">品牌首字母</th>
                  <th class="text-center">操作</th>
              </tr>
              </thead>
              <tbody id="brand">
              </tbody>
          </table>
          <!--数据列表/-->
   </div>
  </div>
  <!-- /.box-body -->
  <!-- 编辑窗口 -->
  <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog" >
          <div class="modal-content">
              <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                  <h3 id="myModalLabel">品牌编辑</h3>
              </div>
              <div class="modal-body">
                  <table class="table table-bordered table-striped"  width="800px">
                      <tr>
                          <td>品牌ID</td>
                          <td><input  class="form-control" placeholder="品牌ID" name="id">  </td>
                      </tr>
                      <tr>
                          <td>品牌名称</td>
                          <td><input  class="form-control" placeholder="品牌名称" id="names" name="name">  </td>
                      </tr>
                      <tr>
                          <td>首字母</td>
                          <td><input  class="form-control" placeholder="首字母" id="firstChars" name="firstChar">  </td>
                      </tr>
                  </table>
              </div>
              <div class="modal-footer">
                  <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="add()">保存</button>
                  <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
              </div>
          </div>
      </div>
  </div>                                       <!-- 编辑窗口 -->
  <div class="modal fade" id="editModals" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog" >
          <div class="modal-content">
              <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                  <h3 id="myModalLabels">品牌编辑</h3>
              </div>
              <div class="modal-body">
                  <table class="table table-bordered table-striped"  width="800px">
                      <tr>
                          <td>品牌ID</td>
                          <td><input  class="form-control" placeholder="品牌ID" id="id" name="id">  </td>
                      </tr>
                      <tr>
                          <td>品牌名称</td>
                          <td><input  class="form-control" placeholder="品牌名称" id="name" name="name">  </td>
                      </tr>
                      <tr>
                          <td>首字母</td>
                          <td><input  class="form-control" placeholder="首字母" id="firstChar" name="firstChar">  </td>
                      </tr>
                  </table>
              </div>
              <div class="modal-footer">
                  <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="updatas()">保存</button>
                  <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
              </div>
          </div>
      </div>
  </div>

</body>
</body>
</html>
<script>
    $(function (){
          getBrand();
       })

       function getBrand(){
          $.ajax({
             url:"/ToShow/selectAll",
             type:"get",
             dataType:"json",
             success:function (selevt){
                 var list =  selevt.data;
                var table = "";
                for(var i = 0; i < list.length; i++){
                   table += '<tr>';
                   table += '<td><input type="checkbox" value="' + list[i].id + '" name="ids"></td>';
                   table += '<td>' + list[i].id + '</td>';
                   table += '<td>' + list[i].name + '</td>';
                   table += '<td>' + list[i].firstChar + '</td>';
                   table += '<td class="text-center">';
                   table += '<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModals" onclick="update(' + list[i].id + ')">修改</button>';
                   table += '<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" onclick="del(' + list[i].id + ')">删除</button>';
                   table += '</td>';
                   table += '</tr>';
                }
                table += '</table>';
                $("#brand").html(table);
             },
             error:function (){
                alert("数据错误");
             }
          })
       }
       function add() {
           alert("增加方法")
           var names = $("#names").val();
           var firstChars = $("#firstChars").val();
            $.ajax({
                url:"/ToShow/insert",
                data: {name:names,firstChar:firstChars},
                type:"post",
                dataType:"json",
                success:function (parameter) {
                    alert(parameter.code)
                    if(parameter.code == 100){
                        alert("增加成功")
                    }else{
                        alert("增加错误")
                    }
                },
                error:function () {
                    alert("代码错误")
                }
            })
       }

       function del(id) {
           alert("删除方法"+id);
            $.ajax({
                url:"/ToShow/delete?id="+id,
                type:"post",
                dataType:"json",
                success:function (parameter) {
                    if(parameter.code == 100){
                        alert("删除成功")
                    }else{
                        alert("删除错误")
                    }
                },
                error:function () {
                    alert("代码错误")
                }
            })
       }

       function update(id) {
           alert("修改方法"+id);
            $.ajax({
                url:"/ToShow/updata?id="+id,
                type:"post",
                dataType:"json",
                success:function (parameter) {
                    var parameter = parameter.update();
                  $("#id").val(parameter.id);
                  $("#name").val(parameter.name);
                  $("#firstChar").val(parameter.firstChar);
                },
                error:function () {
                    alert("代码错误")
                }
            })

       }

       function updatas() {
           alert("修改方法")
           var ids = $("#id").val();
           var names = $("#name").val();
           var firstChars = $("#firstChar").val();
            $.ajax({
                url:"/ToShow/updatas",
                data: {id:ids,name:names,firstChar:firstChars},
                type:"post",
                dataType:"json",
                success:function (parameter) {
                    if(parameter.code == 100){
                        alert("修改成功")
                    }else{
                        alert("修改错误")
                    }
                },
                error:function () {
                    alert("代码错误")
                }
            })
       }
</script>